遊戲上架到 Itch.io

2025 iThome 鐵人賽

DAY 30

Rust

Bevy Rogue-lite 勇者冒險篇 × Rust 遊戲開發筆記系列第 30 篇

17th鐵人賽

Bucky

2025-10-14 01:02:56

116 瀏覽

分享至

最後一篇要把遊戲開放給大家玩了，我選擇的是上架在 Itch.io。

Itch.io

Itch.io 是一個專門給獨立開發者展示、分享、銷售遊戲的平台。類似 Steam，但更自由、開放、沒有審核流程，也支援直接發佈 Web 版遊戲。

預計會發布 Mac 版跟網頁版，但遇到一些問題。其實打包在 Bevy 蠻簡單的，應該說在 Rust 開發環境下，只要之前 cargo run 都沒問題的話，那麼打包應該是不會出錯的。Mac 版確實是蠻簡單的，相信在 Windows 環境下應該也不會太難。結果遇到問題的是網頁版，卡在永遠的 Loading 畫面。經過排查後才發現 WASM 發佈還牽涉到編譯 profile、Canvas 綁定與打包腳本，於是把整個流程重新整理一遍。

這回的重點：

new_demo/Cargo.toml:21 新增 wasm-release profile，針對網頁版優化體積與連結設定。
new_demo/src/main.rs:21 針對 wasm32 綁定 #bevy-canvas 並調整輸入行為，桌面版維持原樣。
new_demo/web/index.html:5 與 new_demo/scripts/package_release.sh:1 建立完整的載入頁面與打包腳本，再配上 test_web.sh 做瀏覽器驗證。

wasm-release Profile 壓縮體積

在 new_demo/Cargo.toml:21 補上一組專用 profile，把體積與載入時間壓到合理範圍：

[profile.wasm-release]
inherits = "release"
opt-level = "z"
lto = "fat"
codegen-units = 1
strip = true

opt-level = "z" 讓 LLVM 優先縮檔案，lto = "fat" 則把跨 crate 最佳化做滿。實測下來，WASM 主體比一般 release 再小一成左右，載入速度也明顯改善。

Canvas 綁定與條件插件

new_demo/src/main.rs:21 用 #[cfg(target_arch = "wasm32")] 導入專屬視窗設定，直接把 Bevy 綁到 HTML 裡的 #bevy-canvas：

#[cfg(target_arch = "wasm32")]
app.add_plugins(
    DefaultPlugins
        .set(ImagePlugin::default_nearest())
        .set(WindowPlugin {
            primary_window: Some(Window {
                canvas: Some("#bevy-canvas".into()),
                fit_canvas_to_parent: true,
                prevent_default_event_handling: true,
                ..default()
            }),
            ..default()
        }),
);

這個設定解決了三件事：Canvas 會自動填滿父容器、瀏覽器不會截走鍵盤事件、桌面版仍沿用舊設定，不需要分支版本。

HTML 載入頁面與資產佈局

new_demo/web/index.html:5 追加了專用的入口頁面，內建載入動畫與錯誤提示，並在 <script type="module"> 中載入 new_demo.js。完成打包後，壓縮檔裡會同時有 index.html、new_demo.js、new_demo_bg.wasm 和整個 assets/，直接丟到 itch.io 就能執行。

<div id="loading">
    <div class="spinner"></div>
    <div id="loading-text">Loading Dungeon of Rust...</div>
</div>
<div id="game-container">
    <canvas id="bevy-canvas"></canvas>
</div>

載入成功時會把 loading overlay 收掉，若出錯則更新提示文字，讓玩家知道要重新整理。

打包腳本與本地驗證

打包流程改寫在 new_demo/scripts/package_release.sh:1，偵測 wasm32-unknown-unknown 目標時自動呼叫 wasm-bindgen 並複製 HTML 模板：

if [ "$TARGET" = "wasm32-unknown-unknown" ]; then
  wasm-bindgen "$WASM_PATH" --target web --out-dir "$DIST_DIR"
  cp "${PROJECT_ROOT}/web/index.html" "${DIST_DIR}/"
fi

配合 cargo build --profile wasm-release --target wasm32-unknown-unknown，就能得到完整的 new_demo_web.zip。為了快速驗證瀏覽器環境，new_demo/scripts/test_web.sh:1 會在 dist 目錄開一個簡單的 HTTP 伺服器，訪問 http://localhost:8080 就能確認操作、UI、音效是否都正常。

上架到 Itch.io

首先會需要註冊一個帳號，可以選擇直接用 GitHub 做第三方登入，或者新辦一個帳號也行，成功之後就進到 Dashboard 頁面，然後點擊 Create new project。

Dashboard

接下來會需要填寫一些資訊，可以照著以下的圖片說明填寫：

填寫基本資料

比較要注意的是 Kind of project 這個欄位，代表這個遊戲是提供下載還是可以直接在線上玩，這裡我先選擇 Downloadable 提供下載，HTML 的版本會另外開一個比較好。

往下會繼續填寫其他的資訊，Uploads 的欄位上傳之後，看你打包的是什麼系統的版本，其他的部分就看你的遊戲要怎麼分類。這裡有一個欄位是 AI generation disclosure 會看你的遊戲開發中，有沒有使用到任何 AI 產生的素材，像是使用 AI 產生圖片或者是音樂，甚至是用 AI 模型在遊戲中運作，這裡就需要勾選 Yes。

填寫基本資料